<template>
	<view class="news-list">
		<!--自定义导航栏-->
		<news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @changTabClick="changTab"></news-nav-bar>

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
						<!--列表-->
						<block v-for="(item,index) in guanzhu.list" :key='index'>
							<common-list :item="item" :index="index"></common-list>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadText="guanzhu.loadText"></load-more>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" placeholder="搜索内容" placeholder-class="icon iconfont icon-sousuo topic-search" />
						</view>
						<!-- 轮播图 -->
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="topic-swiper">
							<block v-for="(item,index) in topic.swiper" :key="index">
								<swiper-item>
									<image :src="item.src"></image>
								</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						<view class="topic-nav">
							<view>
								<view>热门分类</view>
								<view>更多</view>
							</view>
							<view></view>
						</view>
						<!-- 最近更新 -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import commonList from '../../components/common/common-list.vue'
	import newsNavBar from '../../components/news/new-nav-bar.vue'
	import loadMore from '../../components/common/load-more.vue'

	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 1,
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "话题",
						id: "huati"
					}
				],
				guanzhu: {
					loadText: "上拉加载更多",
					list: [
						//文字列表
						{
							userpic: '../../static/demo/touxiang.jpg',
							username: '蜡笔小新',
							sex: 0, //0男 1女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '',
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 20

						},
						//图文
						{
							userpic: '../../static/demo/touxiang.jpg',
							username: '蜡笔小新',
							sex: 1, //0男 1女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/wmfj.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 20

						},
						//视频
						{
							userpic: '../../static/demo/touxiang.jpg',
							username: '蜡笔小新',
							sex: 0, //0男 1女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/wmfj.jpg',
							video: {
								looknum: '20w',
								long: '2:47'
							},
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 20

						},
						//分享
						{
							userpic: '../../static/demo/touxiang.jpg',
							username: '蜡笔小新',
							sex: 0, //0男 1女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '',
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/demo/wmfj.jpg'
							},
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 20

						}
					]
				},
				topic: {
					swiper: [{
							src: '../../static/swiper/banner-1.jpg'
						},
						{
							src: '../../static/swiper/banner-2.jpg'
						}, {
							src: '../../static/swiper/banner-3.jpg'
						}
					]
				}
			}
		},
		methods: {
			//导航栏切换
			changTab(index) {
				this.tabIndex = index
			},
			//滑动事件
			tabChange(e) {
				this.tabIndex = e.detail.current
			},
			// 上拉加载
			loadmore() {
				if (this.guanzhu.loadText != "上拉加载更多") {
					return;
				}
				this.guanzhu.loadText = "加载中";
				setTimeout(() => {
					const obj = {
						userpic: '../../static/demo/touxiang.jpg',
						username: '蜡笔小新',
						sex: 1, //0男 1女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/wmfj.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20

					}
					this.guanzhu.list.push(obj);
					this.guanzhu.loadText = "没有更多数据了";
				}, 1000)
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					const height = res.screenHeight - uni.upx2px(100);
					this.swiperHeight = height;
				}

			})
		},
		components: {
			commonList,
			newsNavBar,
			loadMore
		}
	}
</script>

<style lang="scss">
	.news-list {
		.list {
			.search-input {
				padding: 20rpx;

				input {
					background-color: #F4F4F4;
					border-radius: 10rpx;
				}

				.topic-search {
					display: flex;
					justify-content: center;
					font-size: 27rpx;
				}
			}

			.topic-swiper {
				padding: 0 20rpx 20rpx 20rpx;
				width: 750rpx;
				height: 380rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

			}
		}
	}
</style>
